<template>
  <!--<div class="page-loadmore">-->
  <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight }">
    <mt-loadmore :top-method="loadTop"
                 @translate-change="translateChange"
                 @top-status-change="handleTopChange"
                 :bottom-method="loadBottom"
                 @bottom-status-change="handleBottomChange"
                 :bottom-all-loaded="allLoaded"
                 :autoFill="false"
                 ref="loadmore">
      <slot></slot>
      <div slot="top" class="mint-loadmore-top">
        <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
        <span v-show="topStatus === 'loading'">
                        <span v-show="topStatus === 'drop'">释放更新</span>
                        <mt-spinner type="snake"></mt-spinner>
                    </span>
      </div>
      <div slot="bottom" class="mint-loadmore-bottom">
        <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
        <span v-show="bottomStatus === 'loading'">
                        <mt-spinner type="snake"></mt-spinner>
                    </span>
      </div>
    </mt-loadmore>
  </div>
  <!--</div>-->
</template>


<script type="text/babel">
  export default {
    name: "load-More",
    data() {
      return {
        list: [],
        allLoaded: false,
        bottomStatus: '',
        wrapperHeight: 0,
        topStatus: '',
        translate: 0,
        moveTranslate: 0
      };
    },
    props: {
      height: ''
    },
    mounted() {
      this.$nextTick(()=>{
        this.wrapperHeight = this.height;
      })
    },
    methods: {
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      //上拉加载更多
      loadBottom() {
        this.$emit("loadBottom");
      },
      handleTopChange(status) {
        this.moveTranslate = 1;
        this.topStatus = status;
      },
      onTopLoaded() {
        this.$refs.loadmore.onTopLoaded();
      },
      onBottomLoaded() {
        this.$refs.loadmore.onBottomLoaded();
      },
      setAllLoaded(val) {
        this.allLoaded = val;
      },
      translateChange(translate) {
        const translateNum = +translate;
        this.translate = translateNum.toFixed(2);
        this.moveTranslate = (1 + translateNum / 70).toFixed(2);
      },
      loadTop() {
        this.$emit("loadTop");
      },
    },

  };
</script>

<style lang="scss" scoped>

  .loading-background, .mint-loadmore-top span {
    -webkit-transition: .2s linear;
    transition: .2s linear
  }

  .mint-loadmore-top span {
    display: inline-block;
    vertical-align: middle
  }

  .mint-loadmore-top span.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
  }

  .page-loadmore .mint-spinner {
    display: inline-block;
    vertical-align: middle
  }

  .page-loadmore-desc {
    text-align: center;
    color: #666;
    padding-bottom: 5px
  }

  .page-loadmore-desc:last-of-type,
  .page-loadmore-listitem {
    border-bottom: 1px solid #eee
  }

  .page-loadmore-listitem {
    height: .5rem;
    line-height: .5rem;
    text-align: center
  }

  .page-loadmore-listitem:first-child {
    border-top: 1px solid #eee
  }

  .page-loadmore-wrapper {
    overflow: scroll
  }

  .mint-loadmore-bottom span {
    display: inline-block;
    -webkit-transition: .2s linear;
    transition: .2s linear;
    vertical-align: middle
  }

  .mint-loadmore-bottom span.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
  }

  /*.mint-loadmore-bottom {
      margin-bottom: -.33rem;
  }*/
</style>
